<!--登录-->
<template>
    <div class="root">
        <el-card class="box-card login-card">
            <!--logo-->
            <div class="logo">
                <img src="@/assets/ayan-logo.png">
            </div>
            <!--登录表单-->
            <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" class="loginForm">
                <el-form-item prop="account">
                    <el-input v-model="loginForm.account" clearable
                              placeholder="请输入账号" prefix-icon="el-icon-user"/>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input v-model="loginForm.pwd" @keyup.enter.native="onSubmit('loginFormRef')" clearable show-password
                              placeholder="请输入密码" prefix-icon="el-icon-lock"/>
                </el-form-item>

                <el-form-item>
                    <el-button id="loginBtn" type="primary" @click="onSubmit('loginFormRef')" v-avoid-multi-click="2000">登 录</el-button>
                    <el-button @click="resetForm('loginFormRef')">重 置</el-button>
                </el-form-item>
            </el-form><!--/ 登录表单-->
        </el-card>
    </div>
</template>

<script>
import API from '@/api/api.js'

export default {
    name: "login",
    data() {
        return {
            // 请求标志位
            sentFlag: false,
            // 登录表单
            loginForm: {
                account: '',
                pwd: '',
            },
            // 登录表单校验
            loginRules: {
                account: [
                    {required:true, message: '请输入账号', trigger: 'blur',}
                ],
                pwd: [
                    {required:true, message: '请输入密码', trigger: 'blur',}
                ]
            }
        }
    },
    mounted() {
        let token = sessionStorage.getItem("Authorization");
        if (token) {
            this.$router.push('/home');
        }
    },
    methods: {
        // 表单校验
        checkForm(ref) {
            // 标识：true表单合法；false不合法
            let flag = false;
            this.$refs[ref].validate((valid) => {
                if (valid) {
                    flag = true;
                }
            });
            return flag;
        },
        // 登录按钮
        onSubmit(ref) {
            // 校验表单
            if (!this.checkForm(ref)) {
                return;
            }

            Promise.all([this.login()]).catch( err => {
                this.$message.closeAll();
                this.$message.error("请求失败!");
            });
        },
        // 执行登录
        login() {
            let url = API.auth.login;
            // let param = this.loginForm;
            let param = {
              username: this.loginForm.account,
              password: this.loginForm.pwd
            }
            this.$post(url, param).then(res => {
                console.log(res.data, "登录响应");
                // TODO 后面要改成在 axios.js 里设置token
                if (res.data.success) {
                    this.$message.closeAll();
                    this.$message({
                        type: "success",
                        showClose: true,
                        message: "登录成功",
                    });
                    /* 在axios设置token */
                    sessionStorage.setItem("headNav", "/home");
                    let userInfo = {
                        userName: '',
                        userId: '',
                        account: '',
                        roles: '',
                    };
                    // Object.keys(userInfo).forEach(key => userInfo[key] = res.data.data[key]);
                    let data = res.data.data;
                    userInfo.userId = data.id;
                    userInfo.userName = data.name;
                    userInfo.account = data.username;
                    userInfo.roles = data.roles;
                    sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
                    // 获得用户菜单
                    this.getUserNav();

                } else {
                    this.$message({
                        type: "error",
                        showClose: true,
                        message: res.data.msg,
                    });
                }
            }).catch(err => {
                this.$message.error("请求失败!");

            });
        },
        // 获取菜单
        getUserNav() {
            console.log(sessionStorage.getItem('Authorization'), 'sessionStorage-----------------------');
            let url = API.sysMenu.getUserNav;
            this.$get(url, {}).then( res => {
                let data = res. data;
                if (data.success) {
                    let json = JSON.stringify(data.data);
                    sessionStorage.setItem("userNav", json);

                    location.href="/home";
                    // this.$router.push('/home');
                }
            }).catch( err => {
                this.$message.error("请求失败！");
            })
        },
        // 重置表单
        resetForm(ref) {
            this.$refs[ref].resetFields();
        }
    },
}
</script>

<style lang="scss" scoped>

    .root {
        display: flex;
        align-items: center;
        justify-content: center;;
        width: 100%;
        height: 100%;
        background-color: #79c22d;
        background-size: cover;
        background-image: url("../../assets/respo2.jpeg");
        .page {
            width: 50px;
            /*height: 50px;*/
        }
    }
    .box-card {
        /*background-color: #e9ffda;*/
    }
    /*卡片*/
    .login-card {
        border-radius: 10px;
        width: 580px;
        box-shadow: 0 0 10px;
        /*logo图片*/
        .logo{
            /*border: 2px #eeeeee solid;*/
            /*border-radius: 10%;*/
            /*box-shadow: 0 0 10px;*/

            img {
                width: 85%;
                height: 85%;
                margin: auto 10px;
            }

        }

        /*登录表单*/
        .loginForm{
            padding: 10px 30px;
            /*‘登录’按钮*/
            #loginBtn{
                /*width: 50%;*/
            }

            /deep/.el-input__icon{
                font-size: 17px;
                /*color: #2c3e50;*/
            }
            /deep/.el-input{
                /*padding: 3px 0px;*/
                margin-top: 5px;
            }
            /deep/.el-input__inner{
                height: 45px;
                font-size: 15px;
            }
        }
    }

</style>
